<template>
	<view class="order_container">
		<view class="order_type_box">
			<view class="order_type" @click="handleChooseType(rightTitle)">
				{{ rightTitle }}
			</view>
		</view>
		<view class="" v-if="rightTitle == '靓号订单'">
			<!-- 顶部tab -->
			<view class="order_top_tab_box">
				<view class="top_tab_box" v-for="(item, index) in topTabList" :key="index"
					:class="[isActive === index ? 'top_tab_active_box' : '']" @click="handlerTabs(item,index)">
					<!-- {{ item.name }} | {{item.orderTotal ? item.orderTotal : 0 }} -->
					<span v-if="item.name == '分销订单'">{{ item.name }} |
						{{ orderTotalDistribution }}</span>

					<span v-else-if="item.name == '直营订单'">{{ item.name }} |
						{{ orderTotalDirectly }}</span>
				</view>
			</view>
			<!-- 第二个tab -->
			<view class="order_middle_tab_box">
				<view class="order_middle_tab_all" v-for="item in middleTablist" :key="item.id"
					:class="[isActiveTwo == item.id ? 'order_middle_tab_all_active' : '']"
					@click="handlerMiddleTab(item)">
					<span style="padding-bottom: 16rpx;">{{ item.name }}</span>
					<view class="middle_tab_line"></view>
				</view>
			</view>
			<!-- 搜索 -->
			<view class="order_screen_box">
				<view class="order_screen_all">
					<!-- <view class="screen_time_box">
					<u-input v-model="screenTime" type="select" :border="true" placeholder="请选择日期"
						placeholder-style="font-size: 24rpx; color: #c0c4cc" height="56" @click="handlerTime"></u-input>
				</view> -->

					<view class="other_phone_box">
						<u-input v-model="screenPhone" type="number" :clearable="false" :border="true"
							placeholder="请输入手机号"
							placeholder-style="font-size: 24rpx; color: #c0c4cc; font-family: all-font;"
							height="56"></u-input>
					</view>

					<view class="screen_commodity_box" style="margin-left: 6rpx;">
						<u-input v-model="settStatus" type="select" :border="true" placeholder="请选择结算状态"
							placeholder-style="font-size: 24rpx; color: #c0c4cc; font-family: all-font;" height="56"
							@click="handlerSettStatus"></u-input>
					</view>

					<!-- <view class="screen_commodity_box">
					<u-input v-model="screenCommodity" type="select" :border="true" placeholder="请选择产品"
						placeholder-style="font-size: 24rpx; color: #c0c4cc" height="56"
						@click="handlerCommodity"></u-input>
				</view> -->

					<view class="screen_btn_box">
						<view class="screen_btn" @click="handlerFilter">
							搜索
						</view>
						<!-- <view class="" @click="handlerShowOther">
						<u-icon name="arrow-down" color="#c0c4cc" size="16"></u-icon>
					</view> -->
					</view>
				</view>

				<!-- 隐藏的部分 -->
				<view class="screen_other_box" v-if="isShowOtherSelect">
					<!-- 	<view class="other_phone_box">
					<u-input v-model="screenPhone" type="number" :clearable="false" :border="true" placeholder="请输入手机号"
						placeholder-style="font-size: 24rpx; color: #c0c4cc" height="56"></u-input>
				</view> -->
					<!-- <view class="other_phone_box">
					<u-input v-model="screenIdCard" type="number" :clearable="false" :border="true"
						placeholder="请输入身份证号" placeholder-style="font-size: 24rpx; color: #c0c4cc"
						height="56"></u-input>
				</view>
				<view class="other_phone_box">
					<u-input v-model="screenOrder" type="number" :clearable="false" :border="true" placeholder="请输入订单号"
						placeholder-style="font-size: 24rpx; color: #c0c4cc" height="56"></u-input>
				</view>
				<view class="other_phone_box">
					<u-input v-model="screenOrderState" type="select" :border="true" placeholder="请选择开卡状态"
						placeholder-style="font-size: 24rpx; color: #c0c4cc" height="56"
						@click="handlerOrderState"></u-input>
				</view> -->
				</view>
			</view>
			<!-- 订单列表 -->
			<view class="order_list_box" v-if="isActive == 0">
				<view class="order_title_box">
					<tr v-for="(item ,index) in orderTitleList" :key="index">
						<th>{{ item }}</th>
					</tr>
				</view>
				<view class="order_content_box" v-if="orderContentList.length !== 0">
					<view class="order_content" v-for="(items, indexs) in orderContentList" :key="indexs">
						<view class="order_all" @click="handlerMore(items,indexs)">
							<view style="width: 40rpx;word-break: break-all;margin-right: 20rpx;">{{ indexs + 1 }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 20rpx;">
								{{ items.created_at }}
							</view>
							<view style="width: 156rpx;word-break: break-all;margin-right: 8rpx;">{{ items.contact }}
							</view>
							<view style="width: 180rpx;word-break: break-all;">{{ items.mobile }}</view>
							<view
								style="width: 100rpx; height: 40rpx; word-break: break-all;text-align: center;  background: #909399; color: #fff;border-radius: 8rpx; line-height: 40rpx; "
								v-if="items.open_status == 0">待发货</view>
							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center; color: #fff; background: #ff9900; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 1">生产中</view>
							<!-- <view
							style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #19be6b; border-radius: 8rpx; line-height: 40rpx; "
							v-else-if="items.open_status == 2">已发货</view> -->

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #82848a; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 2 && items.active_status == 0">未激活</view>

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #19be6b; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 2 && items.active_status == 1">已激活</view>

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #fa3534; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 3">开卡失败</view>
						</view>

						<view class="other_content_box" v-if="handlerFlag(items, indexs)">
							<view class="other_detail_top">
								<view class="detail_top_all">
									<view class="top_line">

									</view>
									<view class="top_title">
										订单详情
									</view>
								</view>
								<view class="detail_top_copy" @click="handleCopyOrder(items)">
									一键复制
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									订单编号：
								</view>
								<view class="other_con">
									{{ items.order_no }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									下单时间：
								</view>
								<view class="other_con">
									{{ items.created_at }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									套餐名称：
								</view>
								<view class="other_con">
									{{ items.package_name }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card_name">
								<view class="other_order">
									身份证姓名：
								</view>
								<view class="other_con">
									{{ items.id_card_name }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card">
								<view class="other_order">
									身份证号：
								</view>
								<view class="other_con">
									{{ items.id_card }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									物流公司：
								</view>
								<view class="other_con">
									{{ items.express_name ? items.express_name : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									物流单号：
								</view>
								<view class="other_con">
									{{ items.express_no ? items.express_no : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									收货地址：
								</view>
								<view class="other_con">
									{{ items.express_address ? items.express_address : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.phonenum">
								<view class="other_order">
									生产号码：
								</view>
								<view class="other_con">
									{{ items.phonenum ? items.phonenum : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									激活状态：
								</view>
								<view class="other_con">
									{{ items.active_status == 1 ? '已激活' : '未激活' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.active_time">
								<view class="other_order">
									激活时间：
								</view>
								<view class="other_con">
									{{ items.active_time }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.yj">
								<view class="other_order">
									佣金：
								</view>
								<view class="other_con">
									{{ items.yj ? items.yj : '无' }}
								</view>
							</view>



							<view class="other_detail_con">
								<view class="other_order">
									结算状态：
								</view>
								<view class="other_con">
									<span v-if="items.sett_status == 0">未结算</span>
									<span v-else-if="items.sett_status == 1">结算成功</span>
									<span v-else-if="items.sett_status == 2">结算失败</span>
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_time">
								<view class="other_order">
									结算时间：
								</view>
								<view class="other_con">
									{{ items.sett_time ? items.sett_time : '无' }}
								</view>
							</view>


							<!-- <view class="other_detail_con" v-if="items.first_charge_status">
							<view class="other_order">
								首充状态：
							</view>
							<view class="other_con">
								<span v-if="items.first_charge_status == 0">未首充</span>
								<span v-else-if="items.first_charge_status == 1">已首充</span>
							</view>
						</view>
		
						<view class="other_detail_con" v-if="items.first_charge_time">
							<view class="other_order">
								首充时间：
							</view>
							<view class="other_con">
								{{ items.first_charge_time ? items.first_charge_time : '无' }}
							</view>
						</view>
		
						<view class="other_detail_con" v-if="items.first_charge_amount">
							<view class="other_order">
								首充金额：
							</view>
							<view class="other_con">
								{{ items.first_charge_amount ? items.first_charge_amount : '无' }}
							</view>
						</view> -->






							<view class="other_detail_con">
								<view class="other_order">
									开卡回文：
								</view>
								<view class="other_con">
									{{ items.open_message ? items.open_message : '无' }}
								</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 暂无订单 -->
				<view class="order_content_no" v-else-if="orderContentList.length == 0">
					———— 暂无订单 ————
				</view>
			</view>


			<view class="order_list_box" v-if="isActive == 1">
				<view class="order_title_box">
					<tr v-for="(item ,index) in orderTitleList" :key="index">
						<th>{{ item }}</th>
					</tr>
				</view>
				<view class="order_content_box" v-if="orderContentListDirectly.length !== 0">
					<view class="order_content" v-for="(items, indexs) in orderContentListDirectly" :key="indexs">
						<view class="order_all" @click="handlerMoreDirectly(items,indexs)">
							<view style="width: 40rpx;word-break: break-all;margin-right: 20rpx;">{{ indexs + 1 }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 20rpx;">
								{{ items.created_at }}
							</view>
							<view style="width: 156rpx;word-break: break-all;margin-right: 8rpx;">{{ items.contact }}
							</view>
							<view style="width: 180rpx;word-break: break-all;">{{ items.mobile }}</view>
							<view
								style="width: 100rpx; height: 40rpx; word-break: break-all;text-align: center;  background: #909399; color: #fff;border-radius: 8rpx; line-height: 40rpx; "
								v-if="items.open_status == 0">待发货</view>
							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center; color: #fff; background: #ff9900; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 1">生产中</view>
							<!-- <view
							style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #19be6b; border-radius: 8rpx; line-height: 40rpx; "
							v-else-if="items.open_status == 2">已发货</view> -->

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #82848a; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 2 && items.active_status == 0">未激活</view>

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #19be6b; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 2 && items.active_status == 1">已激活</view>

							<view
								style="width: 156rpx; height: 40rpx;word-break: break-all;text-align: center;color: #fff;background: #fa3534; border-radius: 8rpx; line-height: 40rpx; "
								v-else-if="items.open_status == 3">开卡失败</view>
						</view>

						<view class="other_content_box" v-if="handlerFlag(items, indexs)">
							<view class="other_detail_top">
								<view class="detail_top_all">
									<view class="top_line">

									</view>
									<view class="top_title">
										订单详情
									</view>
								</view>
								<view class="detail_top_copy" @click="handleCopyOrder(items)">
									一键复制
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									订单编号：
								</view>
								<view class="other_con">
									{{ items.order_no }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									下单时间：
								</view>
								<view class="other_con">
									{{ items.created_at }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									套餐名称：
								</view>
								<view class="other_con">
									{{ items.package_name }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card_name">
								<view class="other_order">
									身份证姓名：
								</view>
								<view class="other_con">
									{{ items.id_card_name }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card">
								<view class="other_order">
									身份证号：
								</view>
								<view class="other_con">
									{{ items.id_card }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									物流公司：
								</view>
								<view class="other_con">
									{{ items.express_name ? items.express_name : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									物流单号：
								</view>
								<view class="other_con">
									{{ items.express_no ? items.express_no : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									收货地址：
								</view>
								<view class="other_con">
									{{ items.express_address ? items.express_address : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.phonenum">
								<view class="other_order">
									生产号码：
								</view>
								<view class="other_con">
									{{ items.phonenum ? items.phonenum : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									激活状态：
								</view>
								<view class="other_con">
									{{ items.active_status == 1 ? '已激活' : '未激活' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.active_time">
								<view class="other_order">
									激活时间：
								</view>
								<view class="other_con">
									{{ items.active_time }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									佣金：
								</view>
								<view class="other_con">
									{{ items.yj ? items.yj : '无' }}
								</view>
							</view>



							<view class="other_detail_con">
								<view class="other_order">
									结算状态：
								</view>
								<view class="other_con">
									<span v-if="items.sett_status == 0">未结算</span>
									<span v-else-if="items.sett_status == 1">结算成功</span>
									<span v-else-if="items.sett_status == 2">结算失败</span>
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_time">
								<view class="other_order">
									结算时间：
								</view>
								<view class="other_con">
									{{ items.sett_time ? items.sett_time : '无' }}
								</view>
							</view>


							<!-- <view class="other_detail_con" v-if="items.first_charge_status">
							<view class="other_order">
								首充状态：
							</view>
							<view class="other_con">
								<span v-if="items.first_charge_status == 0">未首充</span>
								<span v-else-if="items.first_charge_status == 1">已首充</span>
							</view>
						</view>
		
						<view class="other_detail_con" v-if="items.first_charge_time">
							<view class="other_order">
								首充时间：
							</view>
							<view class="other_con">
								{{ items.first_charge_time ? items.first_charge_time : '无' }}
							</view>
						</view>
		
						<view class="other_detail_con" v-if="items.first_charge_amount">
							<view class="other_order">
								首充金额：
							</view>
							<view class="other_con">
								{{ items.first_charge_amount ? items.first_charge_amount : '无' }}
							</view>
						</view> -->






							<view class="other_detail_con">
								<view class="other_order">
									开卡回文：
								</view>
								<view class="other_con">
									{{ items.open_message ? items.open_message : '无' }}
								</view>
							</view>

							<!-- 	<view class="other_title">
							<tr v-for="(ite ,ind) in packageOtherTitle" :key="ind">
								<th>{{ ite }}</th>
							</tr>
						</view>
		
						<view class="other_content">
							<view style="width: 200rpx;word-break: break-all;margin-right: 40rpx;">
								{{ items.order_no }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 40rpx;">
								{{ items.package_name }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 40rpx;">
								{{ items.express_name ? items.express_name : '无' }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 40rpx;">
								{{ items.express_no ? items.express_no : '无' }}
							</view>
						</view> -->
						</view>
					</view>

				</view>

				<!-- 暂无订单 -->
				<view class="order_content_no" v-else-if="orderContentListDirectly.length == 0">
					———— 暂无订单 ————
				</view>
			</view>

		</view>

		<view class="" v-if="rightTitle == '号卡订单'">
			<view class="order_list_box">
				<view class="order_title_box">
					<tr v-for="(item ,index) in orderTitleList" :key="index">
						<th>{{ item }}</th>
					</tr>
				</view>
				<view class="order_content_box" v-if="beautifulList.length !== 0">
					<view class="order_content" v-for="(items, indexs) in beautifulList" :key="indexs">
						<view class="order_all" @click="handlerMore(items,indexs)">
							<view style="width: 40rpx;word-break: break-all;margin-right: 20rpx;">{{ indexs + 1 }}
							</view>
							<view style="width: 172rpx;word-break: break-all;margin-right: 20rpx;">
								{{ items.created_at }}
							</view>
							<view style="width: 156rpx;word-break: break-all;margin-right: 8rpx;">
								{{ items.customer_name ? items.customer_name : '暂无' }}
							</view>
							<view style="width: 180rpx;word-break: break-all;">
								{{ items.phone_number ? items.phone_number : '暂无' }}
							</view>
							<view class="">
								<span v-if="items.status == null">暂无</span>
								<span v-if="items.status == 'DELIVER'">已派单</span>
								<span v-else-if="items.status == 'SUCCESS'">订单成功</span>
								<span v-else-if="items.status == 'FAIL'">订单失败</span>
							</view>

						</view>

						<view class="other_content_box" v-if="handlerFlag(items, indexs)">
							<view class="other_detail_top">
								<view class="detail_top_all">
									<view class="top_line">

									</view>
									<view class="top_title">
										订单详情
									</view>
								</view>
								<view class="detail_top_copy" @click="handleCopyBeautifulOrder(items)">
									一键复制
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									订单编号：
								</view>
								<view class="other_con" style="font-family: my-font;">
									{{ items.detail_order_code }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									下单时间：
								</view>
								<view class="other_con">
									{{ items.created_at }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									订单状态：
								</view>
								<view class="other_con">
									<span v-if="items.status == null">暂无</span>
									<span v-if="items.status == 'DELIVER'">已派单</span>
									<span v-else-if="items.status == 'SUCCESS'">订单成功</span>
									<span v-else-if="items.status == 'FAIL'">订单失败</span>
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									套餐名称：
								</view>
								<view class="other_con">
									{{ items.package_name ? items.package_name : '暂无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card_name">
								<view class="other_order">
									身份证姓名：
								</view>
								<view class="other_con">
									{{ items.customer_name }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.id_card">
								<view class="other_order">
									身份证号：
								</view>
								<view class="other_con" style="font-family: my-font;">
									{{ items.id_card }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									收货地址：
								</view>
								<view class="other_con">
									{{ items.address ? items.address : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.phonenum">
								<view class="other_order">
									生产号码：
								</view>
								<view class="other_con">
									{{ items.number ? items.number : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.yj">
								<view class="other_order">
									佣金：
								</view>
								<view class="other_con" style="font-family: my-font;">
									{{ items.yj ? items.yj : '无' }}
								</view>
							</view>



							<view class="other_detail_con" v-if="items.sett_status">
								<view class="other_order">
									结算状态：
								</view>
								<view class="other_con">
									<span v-if="items.sett_status == 0">未结算</span>
									<span v-else-if="items.sett_status == 1">结算成功</span>
									<span v-else-if="items.sett_status == 2">结算失败</span>
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_time">
								<view class="other_order">
									结算时间：
								</view>
								<view class="other_con" style="font-family: my-font;">
									{{ items.sett_time ? items.sett_time : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_reason">
								<view class="other_order">
									结算原因：
								</view>
								<view class="other_con">
									{{ items.sett_reason ? items.sett_reason : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">
									开卡回文：
								</view>
								<view class="other_con">
									{{ items.open_message ? items.open_message : '无' }}
								</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 暂无订单 -->
				<view class="order_content_no" v-else-if="orderContentList.length == 0">
					———— 暂无订单 ————
				</view>
			</view>
		</view>

		<!-- 下单时间弹窗 -->
		<u-picker v-model="showScreenTime" mode="time" @confirm="surePickerTime"></u-picker>

		<!-- 开卡状态弹窗 -->
		<u-select v-model="showScreenOrderState" :list="screenOrderStateList" @confirm="selectOrderState"></u-select>

		<!-- 结算状态弹窗 -->
		<u-select v-model="showSettStatus" :list="settStatusList" @confirm="selectSettStatus"></u-select>

		<!-- 订单倒计时demo -->
		<!-- <uni-countdown class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond"
			@timeup="timeup(item.createTime)" />
		<text class="room-count-txt">之后取消</text> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// timeupSecond: null,

				// 顶部tabs
				topTabList: [{
						id: '0',
						name: '分销订单'
					},
					{
						id: '1',
						name: '直营订单'
					},
				],
				isActive: 0,
				isActiveTwo: '',
				middleTablist: [{
						name: '全部',
						id: ''
					},
					{
						name: '待发货',
						id: '0'
					},
					{
						name: '生产中',
						id: '1'
					},
					{
						name: '已发货',
						id: '2'
					},
					{
						name: '开卡失败',
						id: '3'
					},
					{
						name: '已结算',
						id: '4'
					},
				],
				middleTabCurrent: 0,
				screenTime: '', // 下单时间
				screenCommodity: '', // 商品名称
				showScreenCommodity: false, // 商品名称弹窗
				// 开卡状态弹窗数据
				screenOrderStateList: [{
						label: '待发货',
						value: '10'
					},
					{
						label: '生产中',
						value: '12'
					},
					{
						label: '已发货',
						value: '14'
					},
					{
						label: '开卡失败',
						value: '17'
					},
				],
				// 结算状态数据
				settStatusList: [{
						label: '未结算',
						value: '0'
					},
					{
						label: '结算成功',
						value: '1'
					},
					{
						label: '结算失败',
						value: '2'
					},
				],
				showScreenOrderState: false,
				scrollTop: 0,
				orderTitleList: [
					'序',
					'下单时间',
					'姓名',
					'联系电话',
					'订单状态'
				],
				orderContentList: [],
				orderContentListDirectly: [],

				// 套餐下拉表头
				packageOtherTitle: [
					'序',
					'订单号',
					'套餐名称',
					'物流名称',
					'物流单号',
				],

				showScreenTime: false,
				packageId: '',
				screenPhone: '',
				settStatus: '',
				settStatusCode: '',
				screenIdCard: '',
				screenOrder: '',
				screenOrderState: '',
				// 是否显示下面四个选项
				isShowOtherSelect: false,
				orderStatus: '',
				showIndex: -1,
				pageObj: {
					pageNow: 1,
					pageSize: 10
				},
				total: 0,
				orderTotalDistribution: 0, // 分销订单数量
				orderTotalDirectly: 0, // 直营订单那数量
				isActiveName: '',
				showSettStatus: false,
				settStatusNew: '',
				rightTitle: '靓号订单',
				beautifulPage: {
					pageNow: 1,
					pageSize: 20
				},
				beautifulTotal: 0,
				beautifulList: []
			}
		},
		onShow() {
			// this.isActive = 0
			if (this.pageObj.pageNow == this.total) {
				return
			} else {
				// this.getUserInfo()
				this.getMyOrder()
				this.getShareOrder()
			}

		},
		onLoad() {
			// this.timeup('2023-06-12 15:39:00')
		},
		onReachBottom() {
			if (this.pageObj.pageNow < this.total) {
				this.pageObj.pageNow++
				// this.getFxuserDataCountTest()
				if (this.isActive == 0) {
					this.screenTime = ''
					this.screenCommodity = ''
					this.getMyOrder()
				} else {
					this.screenTime = ''
					this.screenCommodity = ''
					this.getShareOrder()
				}
			} else if (this.pageObj.pageNow == this.total) {
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
				return
			}

			if (this.beautifulPage.pageNow < this.beautifulTotal) {
				this.beautifulPage.pageNow++
				this.getPrettyDirectOrder()
			} else if (this.beautifulPage.pageNow == this.beautifulTotal) {
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
				return
			}
		},
		methods: {
			// 倒计时
			// timeup(createTime) {
			// 	var that = this;
			// 	/**setInterval间歇调用 */
			// 	that.timer = setInterval(function() {
			// 		//订单下单时间
			// 		var buy_time = createTime;
			// 		//计算剩余时间
			// 		var time = (new Date(buy_time).getTime() + 10 * 60 * 1000) - (new Date().getTime());
			// 		if (time > 0) {
			// 			//计算剩余的分钟
			// 			var minutes = parseInt(time / 1000 / 60 % 60, 10);
			// 			//计算剩余的秒数
			// 			var seconds = parseInt(time / 1000 % 60, 10);
			// 			that.timeupSecond = parseInt(time / 1000);
			// 			// console.log(that.timeupSecond)
			// 			//判断分钟和秒数小于10要在前面加个0.
			// 			if (minutes < 10) {
			// 				minutes = '0' + minutes;
			// 			}
			// 			if (seconds < 10) {
			// 				seconds = '0' + seconds;
			// 			}
			// 			var timer = minutes + ":" + seconds;
			// 		}
			// 	}, 1000);
			// 	if (that.timeupSecond == 0) {
			// 		uni.showToast({
			// 			title: '时间到'
			// 		})
			// 		this.getOrderPage()
			// 	}
			// },

			// 获取用户信息
			getUserInfo() {
				this.$request('/getUserInfo', {
					id: uni.getStorageSync('userInfo').id
				}, 'POST').then(res => {
					if (res.code == 1) {
						this.personMsgObj = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取我的订单
			getMyOrder() {
				this.$request('/api/getFxuserOrderList', {
					// user_id: '12942',
					// user_id: uni.getStorageSync('userInfo').id,
					date: this.screenTime,
					package_id: this.packageId,
					mobile: this.screenPhone,
					order_no: this.screenOrder,
					id_card: this.screenIdCard,
					open_status: this.isActiveTwo == 4 ? '' : this.isActiveTwo,
					sett_status: this.settStatusNew,
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
					// status: this.isActiveTwo
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.showDetails = false
							this.orderContentList.push(item)
						})
						this.orderTotalDistribution = res.page_info.total_count

						this.topTabList.forEach(item => {
							if (item.name == '分销订单') {
								item.orderTotal = res.page_info.total_count
							}
						})
						this.total = res.page_info.page_count
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取直营订单
			getShareOrder() {
				this.$request('/api/getDirectFxuserOrderList', {
					// user_id: uni.getStorageSync('userInfo').id,
					// user_id: '12573',
					date: this.screenTime,
					package_id: this.packageId,
					mobile: this.screenPhone,
					order_no: this.screenOrder,
					id_card: this.screenIdCard,
					open_status: this.isActiveTwo == 4 ? '' : this.isActiveTwo,
					sett_status: this.settStatusNew,
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
					// status: this.isActiveTwo
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.showDetails = false
							this.orderContentListDirectly.push(item)
						})
						this.orderTotalDirectly = res.page_info.total_count

						this.topTabList.forEach(item => {
							if (item.name == '直营订单') {
								item.orderTotal = res.page_info.total_count
							}
						})
						this.total = res.page_info.page_count

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 点击显示更多
			handlerMore(val, index) {
				this.orderContentList.forEach((item, index1) => {
					this.$set(item, `isShowMore${index1}`, false)
				})

				this.$set(val, `isShowMore${index}`, true)
			},

			handlerMoreDirectly(val, index) {
				this.orderContentListDirectly.forEach((item, index1) => {
					this.$set(item, `isShowMore${index1}`, false)
				})

				this.$set(val, `isShowMore${index}`, true)
			},

			handlerFlag(item, index) {
				return item['isShowMore' + index]
			},

			// 复制靓号订单
			handleCopyBeautifulOrder(val) {
				let settStatus = val.sett_status == 0 ? '未结算' : val.sett_status == 1 ? '结算成功' : '结算失败'

				let orderObj =
					'订单编号：' + val.detail_order_code + '\n' +
					'下单时间：' + (val.create_at ? val.create_at : '无') + '\n' +
					'套餐名称：' + val
					.package_name + '\n' +
					'身份证姓名：' + val.customer_name + '\n' +
					'身份证号：' + val.id_card + '\n' +
					'收货地址：' + (val.address ? val.address : '暂无') + '\n' +
					'生产号码：' + (val.number ? val.number : '无') + '\n' +
					'佣金：' + val.yj + '\n' +
					'结算状态：' + settStatus + '\n' +
					'结算时间：' + (val.sett_time ? val.sett_time : '无') + '\n' +
					'结算原因：' +
					(val.sett_reason ? val.sett_reason : '无') + '\n' +
					'首充金额：' + (val.first_charge_amount ? val.first_charge_amount : '无') + '\n' +
					'开卡回文：' + (val.open_message ? val.open_message : '无')

				uni.setClipboardData({
					data: orderObj,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 复制号卡订单
			handleCopyOrder(val) {
				let settStatus = val.sett_status == 0 ? '未结算' : val.sett_status == 1 ? '结算成功' : '结算失败'

				let orderObj =
					'订单编号：' + val.order_no + '\n' +
					'下单时间：' + (val.create_at ? val.create_at : '无') + '\n' +
					'套餐名称：' + val
					.package_name + '\n' +
					'身份证姓名：' + val.id_card_name + '\n' +
					'身份证号：' + val.id_card + '\n' +
					'物流公司：' +
					(val.express_name ? val.express_name : '无') + '\n' +
					'物流单号：' + (val.express_no ? val.express_no : '无') + '\n' +
					'收货地址：' + val.express_address + '\n' +
					'生产号码：' + (val.phonenum ? val.phonenum : '无') + '\n' +
					'激活状态：' + (val.active_status == 1 ? '已激活' : '未激活') + '\n' +
					'激活时间：' + (val.active_time ? val.active_time : '无') + '\n' +
					'佣金：' + val.yj + '\n' +
					'结算状态：' + settStatus + '\n' +
					'结算时间：' + (val.sett_time ? val.sett_time : '无') + '\n' +
					'结算原因：' +
					(val.sett_reason ? val.sett_reason : '无') + '\n' +
					'首充状态：' + (val.first_charge_status == 0 ? '未首充' : '已首充') + '\n' +
					'首充时间：' + (val.first_charge_time ? val.first_charge_time : '无') +
					'\n' +
					'首充金额：' + (val.first_charge_amount ? val.first_charge_amount : '无') + '\n' +
					'开卡回文：' + (val.open_message ? val.open_message : '无')

				uni.setClipboardData({
					data: orderObj,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},



			// 选择订单
			handlerTabs(item, index) {
				const that = this
				this.orderContentList = []
				this.orderContentListDirectly = []
				this.isActive = index
				this.isActiveName = item.name
				if (this.isActive == 0) {
					this.pageObj.pageNow = 1
					this.screenTime = ''
					this.screenCommodity = ''
					this.screenPhone = ''
					this.screenIdCard = ''
					this.screenOrder = ''
					this.screenOrderState = ''
					that.getMyOrder()
				} else {
					this.pageObj.pageNow = 1
					this.screenTime = ''
					this.screenCommodity = ''
					this.screenPhone = ''
					this.screenIdCard = ''
					this.screenOrder = ''
					this.screenOrderState = ''
					that.getShareOrder()
				}
				this.isShowOtherSelect = false
			},

			// 切换订单状态
			handlerMiddleTab(val) {
				const that = this
				this.orderContentList = []
				this.orderContentListDirectly = []
				this.pageObj.pageNow = 1
				this.isActiveTwo = val.id
				if (this.isActiveTwo == 4) {
					this.settStatusNew = 1
				} else {
					this.settStatusNew = ''
				}
				if (this.isActive == 0) {
					that.getMyOrder()
				} else if (this.isActive == 1) {
					that.getShareOrder()
				}
				this.isShowOtherSelect = false
			},

			// 选择下单时间
			handlerTime() {
				this.showScreenTime = true;
			},

			// 选择商品名称
			handlerCommodity() {
				this.showScreenCommodity = true;
			},

			// 选择结算状态
			handlerSettStatus() {
				this.showSettStatus = true
			},

			// 选择开卡状态
			handlerOrderState() {
				this.showScreenOrderState = true
			},

			// 选择了商品名称内容
			selectCommodity(e) {
				const that = this
				this.screenCommodity = e[0].label
				this.packageId = e[0].value
			},

			// 选择开卡状态内容
			selectOrderState(e) {
				this.screenOrderState = e[0].label
				this.isActiveTwoate = e[0].label
			},

			// 选择结算状态内容
			selectSettStatus(e) {
				this.settStatus = e[0].label
				this.settStatusCode = e[0].value
			},

			// 选择搜索
			handlerFilter() {
				const that = this
				// 调接口
				if (this.isActive == 0) {
					this.isActiveTwo = ''
					this.orderContentList = []
					that.getMyOrder()
				} else {
					this.isActiveTwo = ''
					this.orderContentListDirectly = []
					that.getShareOrder()
				}
			},

			// 点击三角号
			handlerShowOther() {
				this.isShowOtherSelect = !this.isShowOtherSelect
			},

			// 选择时间
			surePickerTime(e) {
				this.screenTime = e.year + '-' + e.month + '-' + e.day
			},

			handleChooseType(val) {
				if (val == '靓号订单') {
					this.rightTitle = '号卡订单'
					this.beautifulList = []
					this.getPrettyDirectOrder()
				} else {
					this.rightTitle = '靓号订单'
				}
			},

			// 获取靓号订单
			getPrettyDirectOrder() {
				this.$request('/api/getPrettyDirectOrder', {
					page_now: this.beautifulPage.pageNow,
					page_size: this.beautifulPage.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.beautifulList.push(item)
						})
						this.beautifulTotal = res.page_info.page_count
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order_container {
		padding: 16rpx 20rpx;
		
		.order_type_box {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 10rpx;
			
			.order_type {
				font-size: 30rpx;
			}
		}

		.order_top_tab_box {
			display: flex;

			.top_tab_box {
				width: 50%;
				height: 68rpx;
				background: #EDEDED;
				line-height: 68rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: all-font;
				font-weight: 500;
				color: #333;
				border-radius: 8rpx 8rpx 0 0;
			}

			.top_tab_active_box {
				width: 50%;
				height: 68rpx;
				background: #4F96FF;
				line-height: 68rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: all-font;
				font-weight: 500;
				color: #fff;
				border-radius: 8rpx 8rpx 0 0;
			}
		}

		.order_middle_tab_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;
			background: #fff;
			padding: 34rpx 44rpx 0;

			.order_middle_tab_all {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;
				font-family: all-font;
				font-weight: 400;

				.middle_tab_line {
					width: 32rpx;
					height: 4rpx;
					border-radius: 8rpx;
					background: transparent;
				}
			}

			.order_middle_tab_all_active {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;
				font-family: all-font;
				font-weight: 500;
				color: #4F96FF;

				.middle_tab_line {
					width: 32rpx;
					height: 4rpx;
					border-radius: 8rpx;
					background: #4F96FF;
				}
			}
		}

		.order_screen_box {
			background: #FFFFFF;

			.order_screen_all {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				border-radius: 4px;
				padding: 18rpx 24rpx 18rpx 28rpx;

				.screen_time_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx 0 0;

					.screen_time {
						font-size: 26rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 18.56rpx;
					}

					.time_icon {}
				}

				.screen_commodity_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx 0 0;

					.screen_commodity {
						font-size: 26rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 18.56rpx;
					}

					.commodity_icon {}
				}

				.screen_btn_box {
					display: flex;
					align-items: center;
					margin-left: 10rpx;

					.screen_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 60rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: all-font;
						font-weight: 500;
						color: #fff;
						background: #4F96FF;
						border-radius: 8rpx;
					}
				}

			}

			.screen_other_box {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding: 0 24rpx 18rpx 28rpx;

				.other_phone_box {
					width: 268rpx;
					margin: 0 18rpx 18rpx 0;
				}
			}
		}

		.order_list_box {
			border-radius: 4px;
			background: #FFFFFF;
			padding: 26rpx 22rpx 0 22rpx;
			margin-top: 16rpx;

			.order_title_box {
				display: flex;
				justify-content: space-between;
				font-family: all-font;
				padding-bottom: 20rpx;
			}

			.order_content_box {
				// display: flex;
				// justify-content: space-between;
				font-size: 22rpx;
				font-weight: 400;

				.order_content {

					.order_all {
						display: flex;
						font-family: all-font;
						border-top: 1px solid #F0F0F0;
						border-bottom: 1px solid #F0F0F0;
						padding: 22rpx 0;
					}

					.other_content_box {
						padding: 20rpx 0;
						background: #EDEDED;

						.other_detail_top {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 20rpx 16rpx 0;

							.detail_top_all {
								display: flex;
								align-items: center;

								.top_line {
									width: 6rpx;
									height: 26rpx;
									background: #ff5600;
									border-radius: 6rpx;
								}

								.top_title {
									color: #000;
									font-family: all-font;
									font-weight: 550;
									padding-left: 10rpx;
								}
							}

							.detail_top_copy {
								display: flex;
								align-items: center;
								height: 40rpx;
								background: linear-gradient(145deg, #B68A2C, #8D5E22);
								border-radius: 10rpx;
								font-family: all-font;
								font-weight: 400;
								font-size: 24rpx;
								color: #FCFCFC;
								padding: 0 10rpx;
							}
						}

						.other_detail_con {
							display: flex;
							align-items: center;
							color: #000;
							font-family: all-font;
							font-size: 24rpx;
							padding: 0 0 10rpx 20rpx;

							.other_order {
								width: 170rpx;
								padding-right: 8rpx;
							}

							.other_con {}
						}
					}
				}
			}

			.order_content_no {
				text-align: center;
				color: #ccc;
				font-family: all-font;
				padding-bottom: 20rpx;
			}
		}
	}
</style>